@font-face {
    font-family: 'ComicNeue-Regular';
    src: url('https://www.oursbamse.nl/wp-content/fonts/ComicNeue-Regular.eot');
    src: url('https://www.oursbamse.nl/wp-content/fonts/ComicNeue-Regular.eot?#iefix') format('embedded-opentype'),
        url('https://www.oursbamse.nl/wp-content/fonts/ComicNeue-Regular.woff2') format('woff2'),
        url('https://www.oursbamse.nl/wp-content/fonts/ComicNeue-Regular.woff') format('woff'),
        url('https://www.oursbamse.nl/wp-content/fonts/ComicNeue-Regular.ttf') format('truetype'),
        url('https://www.oursbamse.nl/wp-content/fonts/ComicNeue-Regular.svg#ComicNeue-Regular') format('svg');
    font-weight: 600;
    font-style: normal;
    font-display: normal;
}

/* ----------------------------------------------- */
/* Use a media query to add a breakpoint at 600px: */
/* ----------------------------------------------- */
	@media screen and (max-width: 600px) {
		body {
			width: 320px !important;
			padding: 0px !important;
		}
		header, div.container {
			width: 320px !important;
			height: 70px !important;
			margin-left: 0px !important;
			margin-right: 0px !important;
		}
		#col3,
		#col4,
		.no_small_screen,
		#blok30_spotify,
		#blok40_search,
		#blok50_subpages {
			display: none !important;
		}
	}

	.rotate-warning {
	  display: none;
	  position: fixed;
	  top: 0;
	  left: 0;
	  width: 100%;
	  background: red;
	  color: white;
	  padding: 14px;
	  text-align: center;
	  z-index: 9999;
	  margin: 0;
	  padding: 0;
	  padding-top: 5px;
	  padding-bottom: 5px;
	  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
	}

	/* Toon melding in portrait */
	@media screen and (orientation: portrait) {
	  .rotate-warning {
		display: block;
	  }
	  body {
		padding-top: 30px !important;
	  }
	}

	/* Verberg melding in landscape */
	@media screen and (orientation: landscape) {
	  .rotate-warning {
		display: none;
	  }
	}

/* ----------------------------------------------- */
/* Body											   */
/* ----------------------------------------------- */
	:root {
		-webkit-user-select: none; /* Safari 3.1+ */
		-moz-user-select: none; /* Firefox 2+ */
		-ms-user-select: none; /* IE 10+ */
		user-select: none; /* Standard syntax */
		--light-color: #edf7fe;
		/* --dark-color: #5fa8d2 ; */
		--dark-color:#4f94c2;
		color:#76b3d3;
	}
	body {
		background-repeat: no-repeat;
		background-attachment: fixed;
		background-size: cover;
		background-position: right top;
		counter-reset: telle1 telle2 telle3 telle4 telle5 telle6 telle7 telle8;
		/* max-width: 900px; Orgineeel */
		max-width: 1100px;
		margin: 0 auto;
		padding-left:20px;
		padding-right:20px;
		padding-top:0px;
		font-family: "Arial", "Comic Neue";
		font-size: 14px;
		background-image: url('images/musikk-achtergrond.jpg');
	}
	h1 {
		font-family: "Papyrus";
		font-size: 26px;
		font-weight: bold;
		padding: 0.25em 0.375em;
	}
	#blok10_menu,
	#blok20_tableblock,
	#blok30_spotify,
	#blok40_search,
	#blok50_subpages {
		background-color: var(--light-color);
		border-radius: 15px;
		opacity: 75%;
		box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
	}
	h2 {
		color: #555;
		font-size: 20px;
	}
	h3 {
		color: #777;
		font-size: 18px;
	}

/* ----------------------------------------------- */
/* Hyperlinks									   */
/* ----------------------------------------------- */
	a {
		color: var(--dark-color);
		text-decoration:none;
	}
	a:hover {
		color: var(--dark-color);
		opacity: 0.5;
	}
	a.class {
		filter: brightness(80%);
		text-shadow: 1px 1px 1px #000;
		color: var(--light-color);
	}
	img {
		float: center;
		border: 1px solid #ddd;
		width: 40px;
		height: 40px;
		border-radius: 50%;
		margin-top: 10px;
		margin-left: 10px;
		
	}
	img:hover {
		/* box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5); */
		/* opacity: 0.7; */
		transform: scale(1.25);
	}
	#LFM {
		border: 0px solid #ddd;
		width: 25px !important;
		height: 25px !important;
		border-radius: 50%;
		margin-top: 0px !important;
		margin-bottom: 0px !important;
		vertical-align: middle;
	}
	#LFMNONE {
		border: 0px solid #ddd;
		width: 25px !important;
		height: 25px !important;
		border-radius: 50%;
		margin-top: 0px !important;
		margin-bottom: 0px !important;
		/* filter: brightness(35%); */
		opacity: 0.2;
		vertical-align: middle;

	}

/* ----------------------------------------------- */
/* Titel										   */
/* ----------------------------------------------- */
	header {
		font-family: Brush Script MT;
		font-size: 20px;
		line-height: 1px;
		width: 100%;
		text-align: center;
		background-color: var(--light-color);
		color: var(--dark-color);
		border-radius: 15px;
		opacity: 90%;
		margin-top: 15px;
		margin-bottom: 25px;
		box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
	}

/* ----------------------------------------------- */
/* Block 10: Menu								   */
/* ----------------------------------------------- */
	#blok10_menu {
		float: center;
	/* ----------------------------------- */
		margin-top: 15px;
		margin-bottom: 10px;
	/* ----------------------------------- */
		/* padding-top: 5px; */
		padding-bottom: 10px;
		padding-right: 30px; /* of meer, afhankelijk van je ontwerp */
		padding-left: 20px; /* of meer, afhankelijk van je ontwerp */
	/* ----------------------------------- */
		position: relative;
		max-width: 100%;
		overflow-x: auto;
		overflow-y: hidden;
		white-space: nowrap;
		gap: 10px;
		display: flex;
	}
.blok10_menu a.selected {
    opacity: 0;
    animation: fadeIn 0.6s ease-in forwards;
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

	.blok10_menu img.selected-img {
		border: 3px solid #3A8DFF;
		border-radius: 50%;
		padding: 2px;
	}
	#blok10_table {
		float: center;
	/* ----------------------------------- */
		margin-top: -40px;
		margin-bottom: -15px;
	/* ----------------------------------- */
		padding-left: 0px;
	/* ----------------------------------- */		
		position: relative;
	}
	#blok10_columns:hover {
		background-color: transparent;
		border-radius: 0px;
		text-shadow: none;
		border: 0px;
	}
	#blok10_when_selected {
		opacity: 0.2;
	}

/* ----------------------------------------------- */
/* Tableblock									   */
/* ----------------------------------------------- */
	#blok20_tableblock {
		float: left;
	/* ----------------------------------- */
		margin-top: 15px;
		margin-bottom: 5px;
	/* ----------------------------------- */
		padding-top: 0px;
		padding-left: 0px;
	/* ----------------------------------- */
		position: relative;
		width: 100%;
		height: 300px; /* Orgineel 245px */
	/* ----------------------------------- */
		overflow-y:scroll;
	}
	table {
		border-collapse: collapse;
		width: 100%;
	}
	tr, td {
		padding: 5px;
		width: 10px;
		text-align: left;
	}
	th, tr.gekkie:first-child {
		position: sticky;
		top: 0;
		height: 50px;
	}
	tr:hover {
		background-color: #FEFEFE;
		text-shadow: 1px 1px 1px #000;
		}
	tr.gekkie:first-child, tr.gekkie:first-child:hover {
		background-color: #E0EAF0;
		text-shadow: 1px 1px 1px #000;
		opacity: 0.75;
	}
	td {
		background-color: none;
		color: var(--dark-color) !important;
		font-weight: bold;
		opacity: 3;
	}
	.overzicht	{
	  font-size: 16px;
	  line-height: 1.8;       /* Vergroot de regelruimte */
	  margin-bottom: 10px;    /* Extra ruimte tussen lijstitems */
	  color: #888;            /* Tekstkleur */
	  padding-left: 1px;
	}

	/* ID-number */
	#col1 {
		width: 130px;
	}
	/* Artist column */
	#col2 {
		width: 250px;
	}
	/* Extra info under artist name */
	details summary {
		list-style-type: '\002B   ';
	}
	details[open] summary {
		list-style-type: '\00D7   ';
	}
	#col2_summary_approved {
		/* color:SeaGreen; */
	}
	#col2_summary_notverified {
		color:	#F28C28; /* Cadmium Orange */
	}
	#col2_summary_notapproved {
		color:	#D2042D; /* Cherry; */
	}
	/* Title column */
	#col3 {
		width: 250px;
	}
	/* LFM + SP + YT + HEART column */
	#col4 {
		width: 160px;
	}
	/* LFM + SP + YT + date liked column (liked.php) */
	#col5 {
		width: 200px;
	}
	/* LFM + SP + YT + HEART + date added column (added.php) */
	#col6 {
		width: 230px;
	}
	/* Used in 'general' */
	#col8 {
		display: none;
	}
	#col9 {
		text-align: right !important;
		width: auto;
	}

/* ----------------------------------------------- */
/* Block 60: Info database last updated			   */
/* ----------------------------------------------- */
	#blok60 {
		vertical-align: 10px;
		padding-left: 30px;
		font-weight: bold;
		font-size: 12px;
		/* color: var(--light-color); */
		color: #8D979C;
	}

/* ----------------------------------------------- */
/* Informationblock								   */
/* ----------------------------------------------- */
	#blok30_spotify,
	#blok40_search,
	#blok50_subpages {
		float: left;
	/* ----------------------------------- */
		margin-top: 5px;
		margin-bottom: 20px;
		margin-left: 20px;
	/* ----------------------------------- */
		padding-top: 20px;
		padding-bottom: 20px;
		padding-left: 15px;
		padding-right: 15px;
	/* ----------------------------------- */		
		position: relative;
		width: 245px;
	}

/* ----------------------------------------------- */
/* Block 40: Search								   */
/* ----------------------------------------------- */
	#blok40_search {
		width: 190px;
		height: 10%;
	}
	#search,
	#dropdown {
		width: 190px;
        outline: 0;
        border-radius: 5px;
		height:1.8em;
	}
	#disabled_option {
		text-align: center;'
	}

/* ----------------------------------------------- */
/* Block 50: Links to sub-pages					   */
/* ----------------------------------------------- */
	#blok50_subpages {
		width: 300px;
	}
	#blok50_subpages_marked {
		color:#6495ED;
		text-decoration-line: underline;
	}



/* ----------------------------------------------- */
/* CSS Voor paginanummer op index.php (per taal)   */
/* ----------------------------------------------- */
.pagination {
    text-align: center;
    margin-top: 20px;
	white-space: nowrap;
	overflow-x: auto;
	padding-bottom: 10px;
	margin-top: 20px;
    margin-bottom: 20px;
	overflow-x: scroll;
	min-height: 20px;
}

.pagination a {
    display: inline-flex;
    padding: 8px 12px;
    margin: 0 3px;
    background-color: #f0f0f0;
    color: #333;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.3s;
	min-height: 20px;
	    align-items: center; /* verticale centrering */
    justify-content: center; /* horizontale centrering (optioneel) */
}

.pagination a:hover {
    background-color: #ddd;
}

.pagination a.active {
    background-color: #333;
    color: #fff;
    font-weight: bold;
}

.pagination .ellipsis {
    display: inline-block;
    padding: 8px 12px;
    color: #999;
}
.disabled {
    color: #999;
    pointer-events: none;
    cursor: default;
    text-decoration: none;
}
.pagination disabled {
    background-color: #eee;
    color: #999;
    pointer-events: none;
    cursor: default;
    border-color: #ddd;
}